<template>
    <div class="talent-edit">
        <div class="header">
            <p>人才资料</p>
            <el-button class="link" type="primary">
                <router-link to="/talentInList" style="color: #fff;">返回</router-link>
            </el-button>
        </div>
        <div class="" style="margin-top: 20px">
            <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                <div class="flex-box-container">
                    <div class="flex">
                        <el-form-item label="头像：" prop="avatarKey">
                            <el-upload  list-type="picture-card"
                                        :http-request="myUpload"
                                        :action="upLoadUrl"
                                        :file-list='fileAvatarList'
                                        :on-remove="handleRemove1"
                                        :before-upload="beforeAvatarUpload"
                                        :limit="1"
                                        class="avatar1"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <!--<el-upload-->
                                    <!--class="avatar-uploader"-->
                                    <!--:action="upLoadUrl"-->
                                    <!--:on-success="handleAvatarSuccess"-->
                                    <!--:before-upload="beforeAvatarUpload">-->
                                <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
                                <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                            <!--</el-upload>-->
                            <!--<el-upload  list-type="picture-card"-->
                                        <!--:http-request="myUpload"-->
                                        <!--:action="upLoadUrl"-->
                                        <!--:class="{uploadShow:uploadState}"-->
                                        <!--:file-list='fileShowList'-->
                                        <!--:on-remove="handleRemove"-->
                                        <!--:before-upload="beforeAvatarUpload">-->
                                <!--<i class="el-icon-plus"></i>-->
                            <!--</el-upload>-->
                        </el-form-item>
                        <el-form-item label="经验：" prop="workyears">
                            <el-input v-model.number="information.workyears" placeholder="请输入"></el-input>
                        </el-form-item>
                            <el-form-item label="学历：" prop="degree">
                            <el-select v-model="information.degree" placeholder="请选择">
                                <el-option
                                        v-for="item in degreeList"
                                        :key="item.value"
                                        :label="item.label"s
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="来源学校：" prop="fromSchool">
                            <el-input v-model="information.fromSchool" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="来源国家：" prop="">
                            <el-input v-model="information.country" placeholder="请输入" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="录入时间：" prop="">
                            <el-date-picker
                                    v-model="sendTime"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    disabled
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="推荐费：" prop="referral">
                            <el-input v-model.number="information.referral" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="姓名：" prop="name">
                            <el-input v-model="information.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄：" prop="age">
                            <el-input v-model.number="information.age" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="性别：" prop="sex">
                            <el-select v-model="information.sex" placeholder="请选择">
                                <el-option
                                        v-for="item in sexList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>                        </el-form-item>
                        <el-form-item label="联系电话：" prop="mobile">
                            <el-input v-model="information.mobile" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="所属分类：" prop="category">
                            <el-select v-model="information.category" placeholder="请选择">
                                <el-option
                                        v-for="item in categoryList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>                          </el-form-item>
                        <el-form-item label="来源班级：" prop="fromClass">
                            <el-input v-model="information.fromClass" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="月薪：" prop="salary">
                            <el-input v-model="information.salary" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="诚意金：" prop="earnest">
                            <el-input v-model.number="information.earnest" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="人才简历：" prop="resume">
                    <bg-editor
                            :minHeight="300"
                            :uploadUrl="upLoadUrl"
                            :content="information.resume"
                            @editorData='editorInfo'>
                    </bg-editor>
                </el-form-item>
                <el-form-item label="视频：" prop="videoKey">
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="upLoadUrl"
                            :before-upload="beforeVideoUpload"
                            :limit="1"
                            :file-list="fileList"
                            >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">
                            <div>支持格式MP4</div>
                            <div>
                                <a :href="videoUrl" v-if="videoUrl" target="_blank">{{videoUrl}}</a>
                            </div>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="照片：" prop="imagesKey">
                    <el-upload  list-type="picture-card"
                                :http-request="myUpload"
                                :action="upLoadUrl"
                                :file-list='fileShowList'
                                :on-remove="handleRemove"
                                :before-upload="beforePicsUpload"
                                :limit="5">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')" >保存</el-button>
                    <el-button @click="handleEmpty" type="primary" >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    import $ from "jquery"
    export default {
        data() {
            return {
                fileList: [],
                fileAvatarList: [],
                id:'',
                upLoadUrl:'',
                dialogImageUrl:'',
                information: {
                    avatarKey: "",
                    age: "",
                    category: "",
                    country: "中国",
                    degree: "",
                    earnest: "",
                    fromClass: "",
                    fromSchool: "",
                    imagesKey: "",
                    mobile: "",
                    name: "",
                    referral: "",
                    resume: "",
                    salary: "",
                    sex: "",
                    videoKey: "",
                    workyears: "",
                },
                degreeList: [{
                    label: "小学",
                    value: "primary"
                },{
                    label: "初中",
                    value: "junior"
                },{
                    label: "高中",
                    value: "high"
                },{
                    label: "大专",
                    value: "college"
                },{
                    label: "本科",
                    value: "undergraduate"
                },{
                    label: "研究生",
                    value: "graduate"
                },{
                    label: "硕士",
                    value: "master"
                },{
                    label: "博士",
                    value: "doctor"
                }],
                sexList: [{
                    label: "男性",
                    value: "male"
                },{
                    label: "女性",
                    value: "female"
                }],
                categoryList: [{
                    label: "营销人才班",
                    value: "营销人才班"
                },{
                    label: "股权招商班",
                    value: "股权招商班"
                },{
                   label: "总裁助理班",
                   value: "总裁助理班"
                }],
                sendTime: "",
                uploadState:false,
                dialogVisible:false,
                fileShowList:[],
                takeoutId:'',
                rules: {
                    avatarKey: [
                        { required: true, message: '请上传头像', trigger: 'blur' }
                    ],
                    workyears: [
                        { required: true, message: '请输入经验', trigger: 'blur' },
                        { type: 'number', message: '经验必须为数字值' }
                    ],
                    degree: [
                        { required: true, message: '请选择学历', trigger: 'blur' },
                    ],
                    fromSchool: [
                        { required: true, message: '请输入来源学校', trigger: 'blur' },
                    ],
                    referral: [
                        { required: true, message: '请输入推荐费', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    age: [
                        { required: true, message: '请输入年龄', trigger: 'blur' },
                        { type: 'number', message: '年龄必须为数字值' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'blur' },
                    ],
                    mobile: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                    ],
                    category: [
                        { required: true, message: '请选择所属分类', trigger: 'blur' },
                    ],
                    fromClass: [
                        { required: true, message: '请输入来源班级', trigger: 'blur' },
                    ],
                    salary: [
                        { required: true, message: '请输入月薪', trigger: 'blur' },
//                        { type: 'number', message: '月薪必须为数字值' }
                    ],
                    earnest: [
                        { required: true, message: '请输入诚意金', trigger: 'blur' },
                        { type: 'number', message: '诚意金必须为数字值' }
                    ],
                    resume: [
                        { required: true, message: '请输入人才简历', trigger: 'blur' },
                    ],
                },
                typeArr:[
                    {
                        item:'1',
                        value:'LD福利'
                    },{
                        item:'2',
                        value:'LD互动'
                    },{
                        item:'3',
                        value:'LD故事'
                    }
                ],
                imageUrl:'',
                downloadUrl: "",
                sortArr:[],
                sortArr1:[],
                videoUrl: "",
                imagesAttachmentList: [],
            };
        },
        components:{
            'bg-editor':()=>import('../common/bg-editor.vue')
        },
        watch:{

        },
        mounted() {
            this.sendTime = new Date()
            this.id  = this.$router.currentRoute.query.id;
            this.takeoutId = this.$router.currentRoute.query.id;
            if(this.takeoutId){
                this.getDetail();
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.imageUrl)
            },
            beforeAvatarUpload(file) {
                let url =CONSTANT.URL.COMMON.UPLOAD;
                let param = {
                    suffix:file.name.split(".")[1],   // 文件后缀  png
                    contentType:file.type             // 文件类型  image/png
                }
                common.requestAjax(url,param,null,(res)=> {
                    this.upLoadUrl = res.data.bussData.uploadUrl;
                    this.information.avatarKey  = res.data.bussData.fileKey;
                    this.imageUrl = res.data.bussData.downloadUrl;
                    $(".avatar1 .el-upload.el-upload--picture-card").hide()
                    common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{

                    })
                });
            },
            handleRemove1(file, fileList) {
                this.information.avatarKey = ""
                $(".avatar1 .el-upload.el-upload--picture-card").show()
            },
            beforePicsUpload(file) {
                let url =CONSTANT.URL.COMMON.UPLOAD;
                let param = {
                    suffix:file.name.split(".")[1],   // 文件后缀  png
                    contentType:file.type             // 文件类型  image/png
                }
                common.requestAjax(url,param,null,(res)=> {
                    this.upLoadUrl = res.data.bussData.uploadUrl;
                    this.imagesAttachmentList.push(res.data.bussData.fileKey)
                    this.information.imagesKey = this.imagesAttachmentList.join(",")
                    let downloadUrl = res.data.bussData.downloadUrl;
                    common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                        this.fileShowList.push({
                            url:downloadUrl
                        })
                    })
                });
            },
            beforeVideoUpload(file) {
                if (file.type.indexOf("video/mp4") != -1) {
                    let url =CONSTANT.URL.COMMON.UPLOAD;
                    let param = {
                        suffix:file.name.split(".")[1],   // 文件后缀  png
                        contentType:file.type             // 文件类型  image/png
                    }
                    common.requestAjax(url,param,null,(res)=> {
                        this.upLoadUrl = res.data.bussData.uploadUrl;
                        this.information.videoKey = res.data.bussData.fileKey;
                        this.videoUrl = res.data.bussData.downloadUrl
                        common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                        })
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message: "请选择MP4格式的文件"
                    })
                    return false
                }

            },
            myUpload(content) {
                // 重写覆盖上传方法
            },
            getDetail:function(){
                let url = CONSTANT.URL.TALENT.DETAIL,
                    data={
                        id:this.takeoutId
                    }
                common.requestAjax(url,JSON.stringify({}),data,(res)=>{
                    if(res.status == 200){
                        let data = res.data;
                        let info = data.bussData;
                        this.information={
                            avatarKey: info.avatarKey,
                            age: info.age,
                            category: info.category,
                            country: "中国",
                            degree: info.degree,
                            earnest: info.earnest,
                            fromClass: info.fromClass,
                            fromSchool: info.fromSchool,
                            imagesKey: info.imagesKey,
                            mobile: info.mobile,
                            name: info.name,
                            referral: info.referral,
                            resume: info.resume,
                            salary: info.salary,
                            sex: info.sex,
                            videoKey: info.videoKey,
                            workyears: info.workyears,
                        };
                        this.sendTime = info.gmtCreated
                        this.videoUrl = info.video
                        $(".avatar1 .el-upload.el-upload--picture-card").hide()
                        this.fileAvatarList.push({
                            url: info.avatar
                        })
                        info.images.map( item => {
                            this.fileShowList.push({
                                url: item
                            })
                        })
                    }
                })
            },
            handleRemove(file, fileList) {
                this.information.imagesKey = []
                let arr = []
                fileList.map( (item, index) => {
                    arr.push(item.url.split("com/")[1])
                })
                this.information.imagesKey = arr.join(",")
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleFileSuccess(res, file) {
                if(res.status == 200){
                    let picItem = res.data.bussData;
                    this.information.images.push(picItem);
                    if(this.information.images.length>=8){
                        this.uploadShow = true;
                    }
                }
            },
            editorInfo(val){
                this.information.resume = val;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.takeoutId) {
                            let url = CONSTANT.URL.TALENT.UPDATE;
                            let param = JSON.stringify(Object.assign(this.information, {id: this.takeoutId}));
                            console.log(param)
                            common.requestAjax(url, param, null, res => {
                                if(res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    });
                                    this.$router.push("/talentInList");
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.msg
                                    });
                                }
                            });
                        } else {
                            let url = CONSTANT.URL.TALENT.ADD;
                            let param = JSON.stringify(this.information);
                            common.requestAjax(url, param, null, res => {
                                if(res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    });
                                    this.$router.push("/talentInList");
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.msg
                                    });
                                }
                            });
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleEmpty() {
                $(".avatar1 .el-upload.el-upload--picture-card").show()
                this.videoUrl = "";
                this.fileAvatarList = [];
                this.fileShowList = [];
                this.information = {
                    avatarKey: "",
                    age: "",
                    category: "",
                    country: "中国",
                    degree: "",
                    earnest: "",
                    fromClass: "",
                    fromSchool: "",
                    imagesKey: "",
                    mobile: "",
                    name: "",
                    referral: "",
                    resume: "",
                    salary: "",
                    sex: "",
                    videoKey: "",
                    workyears: "",
                }

            }
        }
    }
</script>

<style lang="scss" scoped >
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border: 1px dashed #d9d9d9;
        border-radius: 50%;
    }
    .avatar1 {

    }
    .talent-edit {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .tip-img{
            font-size: 12px;
            color:red;
        }
        .main {
            // width:500px;
            //max-width: 1500px;
            .el-textarea{
                width: 60%;
            }
            .car-info{
                .car-list{
                    overflow: hidden;
                    .el-form-item{
                        float: left;
                        .el-input,.el-select{
                            width: 150px;
                        }
                    }
                }
            }
            margin: 20px 0 0 40px;
            clear: both;
            .el-input,
            .el-select {
                width: 250px;
            }
            .modal-body{
                .note-image-input{
                    display: block;
                }
            }
        }
    }
</style>
<style>
    .distpicker-address-wrapper select{
        margin-right: 20px;
    }
    .panel-heading{
        position: relative!important;
    }
    .note-toolbar{
        z-index: 10!important;
    }
    .uploadShow  .el-upload{display: none;}
</style>

